<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件菜单</title>
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"/>
    <script type="text/javascript" src="../jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery/env.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

    <style>
        .menu-icon{
            width: 16px;
            height: 16px;
        }
        .icon-trans-test-menu{
            background: url("icons/trans_test_menu.png") no-repeat center center;
        }
        .menu-draggable{
            margin: 2px 0 0 5px;
        }
    </style>
</head>
<body>
<div id="designMenuPanel" class="easyui-panel" data-options="title:'核心对象',width: 180,height: 500" >
</div>
</body>
<script>
$(function () {
    var trans={transName:'ETL组件',transType:'ETL',transId:'',transDesc:''}

    let draggable = $('<div class="menu-draggable"></div>').appendTo('#designMenuPanel');
    let panel =$('<div class="menu-panel"></div>').appendTo(draggable).panel({
        title:'ETL组件',
        width:160,
        iconCls:'icon-trans-test-menu',
        border:false
    });
    draggable.draggable({
        proxy:'clone',
        revert:true,
        onBeforeDrag:function(){},
        onStartDrag:function(){
        },
        onDrag:function(){

        },
        onEndDrag:function (e) {
            let offset =$(this).draggable('proxy').offset();
            let left = offset.left;
            let top = offset.top;

            if(left>180){
                console.log('create a step to ('+left+','+top+')')
            }


        },
        onStopDrag:function (e) {

            // let offset = $(this).offset();
            // console.log('to', offset.left,offset.top)
        }
    });


   /* var designMenuItem=$('<div class="design"></div>').appendTo('#designMenuPanel');
    designMenuItem.panel({
        noheader:true,
        width:160,
        height:50,

    })*/
    /*<div class="unit-item"><span class="unit-icon"></span><sapn class="unit-title">组件标题</sapn></div>*/
    /*unitMenu.panel({

    });*/

})



</script>
</html>
